﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable Demos - A jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="demo-container">
        <a href="http://fooplugins.com/plugins/footable-jquery/"><img src="img/footable.png" border="0" /></a>
        <div class="alert">
            All demos include documentation so you can see exactly how things are done!
        </div>
        <h3>Standard Demos</h3>
        <ul>
            <li><a href="getting-started.htm">Getting Started</a> - a simple demo to get you up and running with FooTable in 5 minutes.</li>
            <li><a href="data-attributes.htm">Data Attributes</a> - a look at all the available data attributes.</li>
            <li><a href="row-toggle.htm">Row Toggler</a> - setup which column has the toggler, or hide it completely.</li>
            <li><a href="icon-styles.htm">Icon Styles</a> - change the default icons for expanding and collapsing your FooTables.</li>
            <li><a href="hidden-columns.htm">Hiding Columns</a> - hide certain columns from showing at all.</li>
            <li><a href="auto-expand-first-row-on-breakpoint.htm">Auto Expand First Row</a> - expand the first row when a breakpoint is hit.</li>
            <li><a href="expand-collapse-all.htm">Expand / Collapse All Rows</a> - expand or collapse all rows.</li>
            <li><a>[TODO] Using Colspan</a> - FooTable support the use of colspan in your tables.</li>
            <li><a>[TODO] Controls</a> - do you use other 3rd party controls inside your tables?</li>
            <li><a>[TODO] Zebra Stripes</a> - how to get your zebra stripes to work.</li>
	        <li><a href="arbitrary_toggle_markup.htm">Arbitrary Expand/Collapse Markup</a> - replace the toggler icons with your own (non-background) content</li>
	        <li><a href="editable-columns.htm">Editable / Modifiable Columns</a> - support for html input elements and dynamic columns.</li>
        </ul>
        <h3>Add-On Demos</h3>
        <ul>
            <li><a href="sorting.htm">Sorting</a> - make your FooTable's sortable.</li>
            <li><a href="filtering.htm">Filtering</a> - include filtering in your FooTable.</li>
            <li><a href="paging.htm">Pagination</a> - include pagination in your FooTable.</li>
						<li><a href="striping.htm">Striping</a> - include striping on your FooTable.</li>
            <li><a href="bookmarkable.htm">Bookmarkable</a> - Add bookmarks in the URL, so a user can save a particular view of a FooTable.</li>
            <li><a href="showcase.htm">Showcase</a> - a showcase using the sorting, filtering and pagination add-ons.</li>
        </ul>
        <h3>Theme Demos</h3>
        <ul>
            <li><a href="metro-theme.htm">Metro Theme</a> - A demo showing off the Metro theme.</li>
            <li><a href="old-theme.htm">Old Theme</a> - A demo showing off the original FooTable theme.</li>
        </ul>
        <h3>Advanced Demos</h3>
        <ul>
            <li><a href="events.htm">FooTable Events</a> - Hook into the FooTable events.</li>
            <li><a href="api.htm">FooTable API</a> - Programmatically call FooTable functions.</li>
            <li><a href="triggers.htm">FooTable Triggers</a> - Trigger certain FooTable actions.</li>
            <li><a href="event-interception.htm">Event Interception</a> - Intercept the FooTable add-on events.</li>
            <li><a href="ajax.htm">AJAX</a> - Add table data using AJAX calls and then redraw your FooTable.</li>
            <li><a href="add-delete-row.htm">Add / Remove Rows</a> - Add or remove rows from your FooTable.</li>
            <li><a href="group-headers.htm">Group Headers</a> - Group your column headers together for complex table structures.</li>
            <li><a href="multiple-showcases.htm">Multiple Tables</a> - a demo with more than 1 FooTable on the same page.</li>
            <li><a href="reset.htm">Reset Table</a> - change the columns after init by using reset.</li>
            <li><a href="accordion.htm">Accordion</a> - turn your FooTable into a simple accordion.</li>
            <li><a>[TODO] AJAX + Mustache</a></li>
            <li><a>[TODO] Table Of Contents</a></li>
        </ul>
    </div>
</body>
</html>
